<template>
  <div>
    <el-descriptions
      class="margin-top"
      title="用户信息"
      :column="3"
      :size="size"
      border
      style="position: relative"
      :v-model="user"
    >
      <template #extra>
        <el-button type="primary" @click="isOpen = !isOpen">编辑</el-button>
      </template>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <Avatar />
            </el-icon>
            头像
          </div>
        </template>
        <el-avatar :src="circleUrl"></el-avatar>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <UserFilled />
            </el-icon>
            用户名
          </div>
        </template>
        {{ user.userName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <User />
            </el-icon>
            昵称
          </div>
        </template>
        {{ user.userName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <iphone />
            </el-icon>
            电话
          </div>
        </template>
        {{ user.phonenumber }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle"><female /></el-icon>
            性别
          </div>
        </template>
        <div v-if="(user.sex = 1)">男</div>
        <div v-else>女</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <location />
            </el-icon>
            Place
          </div>
        </template>
        Suzhou
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            备注
          </div>
        </template>
        <el-tag size="small">{{ user.remark }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <ArrowRightBold />
            </el-icon>
            邮箱
          </div>
        </template>
        <el-tag size="small">{{ user.email }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            Address
          </div>
        </template>
        这是地址
      </el-descriptions-item>
    </el-descriptions>

    <Register :isVisiable="isOpen" :userInfo="user"></Register>
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue-demi'
import { ref, toRefs, computed } from 'vue'
import { getInfo } from '@/api/login'
import Register from './../../components/Register.vue'
import {
  User,
  Iphone,
  Location,
  Tickets,
  OfficeBuilding,
  Female,
  ArrowRightBold,
  Promotion,
  UserFilled,
  Avatar
} from '@element-plus/icons-vue'
const size = ref('')
const isOpen = ref(false)
const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})
const state = reactive({
  circleUrl:
    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  squareUrl:
    'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  sizeList: ['large', 'default', 'small'],
})

const { circleUrl, squareUrl, sizeList } = toRefs(state)
const onOpen = () => {

}
const user = reactive({
  userId: '',
  deptId: '',
  userName: '',
  nickName: '',
  userType: '',
  email: '',
  phonenumber: '',
  sex: '',
  avatar: '',
  password: '',
  status: '',
  loginIp: '',
  loginDate: '',
  createBy: '',
  createTime: '',
  updateBy: '',
  updateTime: ''
})

/**
 * 拉取用户信息
 */
const getUserInfo = onMounted(() => {
  console.log("hahaha")
  getInfo().then((res) => {
    console.log(res);
    user.userId = res.user.userId
    user.deptId = res.user.deptId
    user.userName = res.user.userName,
      user.nickName = res.user.nickName,
      user.userType = res.user.userType,
      user.email = res.user.email
    user.phonenumber = res.user.phonenumber,
      user.sex = res.user.sex,
      user.avatar = res.user.avatar,
      user.password = res.user.password,
      user.status = res.user.status,
      user.loginIp = res.user.loginIp,
      user.loginDate = res.user.loginDate,
      user.createBy = res.user.createBy,
      user.createTime = res.user.createTime,
      user.updateBy = res.user.updateBy,
      user.updateTime = res.user.updateTime
    user.remark = res.user.remark

  })
})

</script>

<style scoped>
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>